<template>
  <!-- 值班计划对话框 -->
  <el-dialog
    :title="$t('dialog.title.create_plan')"
    :visible.sync="dutyPlanDialogVisible"
    top="70px"
    width="50%"
    @open="open()"
    :before-close="closeDialog"
  >
    <span class="main"
      ><el-form
        ref="form"
        :label-position="labelPosition"
        label-width="110px"
        :model="form"
        inline
        :show-message="false"
        :rules="rules"
      >
        <el-form-item :label="$t('dialog.form.name1')" prop="name_id">
          <el-select
            v-model="form.name_id"
            :placeholder="$t('dialog.form.options.select')"
          >
            <el-option
              v-for="item in userData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('dialog.form.start_time')" prop="start_time">
          <el-date-picker
            v-model="form.start_time"
            type="datetime"
            :placeholder="$t('dialog.form.select_time')"
            value-format="yyyy-MM-dd HH:mm"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('dialog.form.end_time')" prop="end_time">
          <el-date-picker
            v-model="form.end_time"
            type="datetime"
            :placeholder="$t('dialog.form.select_time')"
            value-format="yyyy-MM-dd HH:mm"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{ $t("dialog.btn.cancel") }}</el-button>
      <el-button type="primary" @click="addPersonnel" style="width: 200px">{{
        $t("dialog.btn.create")
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["dutyPlanDialogVisible", "userData"],
  data() {
    return {
      form: {
        id: "",
        replace_name_id: 0,
      },
      labelPosition: "right",
      rules: {
        name_id: [
          {
            required: true,
            trigger: "blur",
            message: "名称不能为空",
          },
        ],
        start_time: [
          {
            required: true,
            trigger: "blur",
            message: "开始时间不能为空",
          },
        ],
        end_time: [
          {
            required: true,
            trigger: "blur",
            message: "截止时间不能为空",
          },
        ],
      },
    };
  },
  methods: {
    open() {},
    // 创建按钮
    addPersonnel() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        this.$http.post("/business/duty/create", this.form).then((res) => {
          console.log(res);
          if (res.status == 200) {
            // console.log(this.form);
            this.$refs.form.resetFields();
            this.$message.success("Add a success!");
            this.closeDialog("1");
          } else {
            this.$message.error("Add failure!");
          }
        });
      });
    },
    // 关闭弹出框
    closeDialog(t) {
      this.$emit("closeDialog", t);
    },
  },
};
</script>

<style lang='less' scoped>
</style>